import React, {useState} from 'react'
import {Card, Progress, Collapse} from "reactstrap";
import {percentage} from '../../../../helpers/utils'
import {ChevronDown, ChevronUp} from "react-feather";

const RelationItem = props => {
  return (
    <div className={`relation-card__item ${props.className || ''}`}>
      <div className="analytics-card__info">
        <span className="mb-25">{props.name}</span>
      </div>
      <div className="d-flex justify-content-between align-items-center">
        <Progress className="analytics-card__progress big-progress-analytics" color={props.progressColor} value={percentage(props.count, props.sum)} />
        <div className="stastics-info text-right">
          <span className="text-muted d-block">{`${percentage(props.count, props.sum)}%`}</span>
        </div>
      </div>
    </div>
  )
}

const Relation = React.memo(props => {
  const [isOpen, setIsOpen] = useState(false)
  const toggle = () => setIsOpen(!isOpen)

  const showElem = [], hideElem = []
  let sum = props.relation.reduce((acc, item) =>  acc + item.count, 0)
  const progressColor = ["primary", "danger", "warning", "info", "danger"]

  props.relation.forEach((item, index) => {
    if(index < 3) {
      showElem.push(
        <RelationItem
          key={index}
          name={item.name}
          count={item.count}
          sum={sum}
          progressColor={progressColor[index]}
        />
      )} else {
      hideElem.push(
        <RelationItem
          key={index}
          name={item.name}
          count={item.count}
          sum={sum}
          progressColor={progressColor[index]}
          className="relation-card__collapse-item"
        />
      )
    }
  })

  return (
    <Card className={`analytics-card relation-card ${props.bgColor}`}>
      <div className="analytics-card__header d-flex justify-content-between">
        <div className="analytics-card__title">Семейное положение</div>
        {
          props.relation.length > 3
          && <span onClick={toggle} className="relation-card__more-link flat-success cursor-pointer">
            { isOpen ? <ChevronUp size={18} className="mr-25" /> : <ChevronDown size={18} className="mr-25" /> }
            Еще
          </span>
        }
      </div>
      <div className="analytics-card__content analytics-card__content-small">
        {showElem}
        <Collapse isOpen={isOpen}>
          {hideElem}
        </Collapse>
      </div>
    </Card>
  )
})

export default Relation
